<template>
  <div>
    <!-- 通讯录二维码 -->
    <span class="qrcode_icon" @click="getErcode">
      <img src="../assets/images/qrico.jpg">
    </span>
    <div transfer-dom>
      <x-dialog :show.sync="show2" class="dialog-demo" @on-show="addressCode" :hide-on-blur="true">
        <div class="img-box">
          <qrcode v-if="cardercode" value="http://www.baidu.com" type="canvas" :size="230"></qrcode>
          <qrcode v-if="!cardercode" v-model="bulidAddress" type="canvas" :size="230"></qrcode>
        </div>
        <tab>
          <tab-item selected @on-item-click="onItemClick">名片二维码</tab-item>
          <tab-item @on-item-click="onItemClick">通讯录二维码</tab-item>
        </tab>
      </x-dialog>
    </div>
  </div>
</template>
<script type="application/ecmascript">
import _ from 'lodash'
import { mapState} from 'vuex'
import {Tab,TabItem,XDialog,Qrcode} from 'vux'
export default {
    components: {
      Tab,
      TabItem,
      XDialog,
      Qrcode
    },
    data () {
      return {
        show2: false,
        cardercode:true,
      }
    },
    name: 'HeaderBgImg',
    computed: {
      ...mapState({
        data:state => state.moduleEdit.data,
      }),
      bulidAddress(){
         var a, b = this.data.baseLists.firstName.slice(0,1),
               c = this.data.baseLists.firstName.slice(1),
               d = this.data.baseLists.company,
               e = this.data.baseLists.address,
               g = this.data.baseLists.telephone,
               h = "",
               i = this.data.baseLists.web,
               j = this.data.baseLists.email;
        a = "BEGIN:VCARD", a += "\r\nN:" + b + ";" + c + ";;;",
            a += "\r\nFN: " + c + "  " + b, d && (a += "\r\nTITLE:" + d),
            e && (a += "\r\nADR;WORK:;;" + e + ";;;;"), g && (a += "\r\nTEL;CELL,VOICE:" + g),
            h && (a += "\r\nTEL;WORK,VOICE:" + h), i && (a += "\r\nURL;WORK:" + i), j && (a += "\r\nEMAIL;INTERNET,HOME:" + j),
            a += "\r\nEND:VCARD"
        return utf16to8(a)
      }
    },
    methods:{
      getErcode:_.debounce(function (val) {
        this.show2 = true
      },300),
      addressCode:_.debounce(function () {
        //console.log(this.bulidAddress)
        
      },300),
      onItemClick (index) {
        this.$vux.loading.show({
          text: 'loading'
        })
        setTimeout(() => {
          this.$vux.loading.hide()
          if(index==0){
            this.cardercode=true
          }else{
            this.cardercode=false
          }
        }, 1000)
      },
    }
}
function utf16to8(str) {     
    var out, i, len, c;     
    out = "";     
    len = str.length;     
    for(i = 0; i < len; i++) {     
    c = str.charCodeAt(i);     
    if ((c >= 0x0001) && (c <= 0x007F)) {     
        out += str.charAt(i);     
    } else if (c > 0x07FF) {     
        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));     
        out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));     
        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));     
    } else {     
        out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));     
        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));     
    }     
    }     
    return out;     
}
</script>
<style lang="less" scoped>
.qrcode_icon{ 
  top:65px;
  width:32px; 
  height:32px; 
  display:block; 
  position:fixed; 
  right:20px; 
  z-index:1002;
  img{ 
    width:32px; 
    border-radius:5px;
  }
}
.dialog-demo {
  .weui-dialog{
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {
    padding-top:30px;
    height: 350px;
    overflow: hidden;
  }
  .vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}
</style>